ANTOOZA-FRONTEND/app/(main)/user/[sid]/_component/FollowListItem.tsx

import Link from 'next/link';
import { BadgeCheck } from 'lucide-react';
import FollowButton from '@/app/component/FollowButton';
import { FollowMember } from '@/types/account/follow';

type Props = {
	member: FollowMember;
};

export default function FollowListItem({ member }: Props) {
	const displayName = member.name ?? member.sid;
	const avatarInitial = (displayName.charAt(0) || '?').toUpperCase();

	return (
		<li className="user-profile__follow-item">
			<Link
				href={`/user/${member.sid}`}
				className="user-profile__follow-avatar"
				aria-label={`${displayName} 프로필 보기`}
			>
				{member.thumb ? (
					<img src={member.thumb} alt="" className="user-profile__follow-avatar-img" />
				) : (
					<span className="user-profile__follow-avatar-fallback" aria-hidden="true">{avatarInitial}</span>
				)}
			</Link>

			<div className="user-profile__follow-body">
				<Link href={`/user/${member.sid}`} className="user-profile__follow-name">
					<span className="user-profile__follow-name-text">{displayName}</span>
					{member.isCreator && (
						<span className="user-profile__follow-badge" aria-label="크리에이터">
							<BadgeCheck size={14} fill="currentColor" stroke="#fff" strokeWidth={2.5} aria-hidden="true" />
						</span>
					)}
				</Link>
				<span className="user-profile__follow-handle">@{member.sid}</span>
				{member.summary && (
					<p className="user-profile__follow-summary">{member.summary}</p>
				)}
			</div>

			<FollowButton memberSID={member.sid} className="user-profile__follow-btn" />
		</li>
	);
}